<template>
  <div class="admin-pro-list-add">
    <div class="admin-pro-list-add-nav">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/admin/index/home' }"
          ><i class="el-icon-s-home"> 首页</i></el-breadcrumb-item
        >
        <el-breadcrumb-item
          ><a href="/admin/index/prolist"
            ><i class="el-icon-s-operation">产品类表</i></a
          ></el-breadcrumb-item
        >
        <el-breadcrumb-item
          ><a href="/admin/index/prolist/addpro"
            ><i class="el-icon-sell">添加商品</i></a
          ></el-breadcrumb-item
        >
      </el-breadcrumb>
    </div>

    <div class="admin-pro-list-add-pro">
      <div class="title">添加商品</div>
      <div class="admin-pro-list-add-pro-main">
        <table>
          <tbody>
            <tr>
              <td>商品名称</td>
              <td>
                <input type="text" v-model="sname" />
              </td>
            </tr>
            <tr>
              <td>适用对象</td>
              <td>
                <input type="text" v-model="spro" />
              </td>
            </tr>
            <tr>
              <td>图片</td>
              <td>
                <el-upload
                  class="upload-demo"
                  drag
                  action="http://localhost:3000/v1/supply/insert"
                  multiple
                  name="uploadFile"
                >
                  <i class="el-icon-upload"></i>
                  <div class="el-upload__text">
                    将图片拖到此处，或<em>点击上传</em>
                  </div>
                  <div class="el-upload__tip" slot="tip">
                    只能上传jpg/png文件，且不超过500kb
                  </div>
                </el-upload>
              </td>
            </tr>
            <tr>
              <td>售货状态</td>
              <td>
                <input type="text" v-model="sstate" />
              </td>
            </tr>
            <tr>
              <td>库存</td>
              <td>
                <input type="text" v-model="sstore" />
              </td>
            </tr>
            <tr>
              <td>营养成分</td>
              <td>
                <input type="text" v-model="scomp" />
              </td>
            </tr>
            <tr>
              <td>保质期</td>
              <td>
                <input type="text" v-model="stime" />
              </td>
            </tr>
            <tr>
              <td>重量</td>
              <td>
                <input type="text" v-model="sweight" />
              </td>
            </tr>
            <tr>
              <td>价格</td>
              <td>
                <input type="text" v-model="sprice" />
              </td>
            </tr>
          </tbody>
        </table>
        <div class="admin-pro-list-add-pro-btn">
          <el-button type="success" @click="submit">提交</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      sname: "",
      spro: "",
      simg: "",
      sstate: "",
      sstore: "",
      scomp: "",
      stime: "",
      sweight: "",
      sprice: "",
    };
  },
  methods: {
    submit() {
      let params = `sname=${this.sname}&spro=${this.spro}&simg=${this.simg}&sstate=${this.sstate}&sstore=${this.sstore}&scomp=${this.scomp}&stime=${this.stime}&sweight=${this.sweight}&sprice=${this.sprice}`;
    },
  },
};
</script>

<style lang="scss" scoped>
.admin-pro-list-add {
  padding: 10px 20px;
  .admin-pro-list-add-pro {
    margin-top: 20px;
    .title {
      background-color: rgba(202, 199, 199, 0.4);
      padding: 8px;
    }
    .admin-pro-list-add-pro-main {
      table {
        // border: 1px solid gray;
        width: 100%;
        text-align: center;
        margin-top: 10px;
        tr {
          td:first-child {
            text-align: right;
          }
          td:last-child {
            text-align: left;
            padding: 10px;
            input {
              width: 200px;
              padding: 10px;
              border: 1px solid #333;
              border-radius: 4px;
            }
          }
        }
      }
    }
    .admin-pro-list-add-pro-btn {
      margin-left: 175px;
    }
  }
}
</style>
